<template>
  <div>
    <custom-table
      :columns="columns"
      :query="queryParams"
      :show-row-btn="['delete']"
      :show-head-btn="['delete','flush']"
      :row-btn="rowBtn"
      :head-btn="headBtn"
      v-bind="$attrs"
      v-on="listeners"
      @tap-head-btn="onTapHeadBtn"
      @tap-row-btn="onTapRowBtn"
      @row-dblclick="onRowDbClick"
    >
    </custom-table>

    <el-dialog
        title="详情"
        :visible.sync="Visible"
        :modal="true"
        top="10vh"
        append-to-body
      >
      <pop-up mode="pop" v-if="Visible" :arr="tableData" :column="tableHead" :hiddenHeadBtn="false"  :hideRowBtn="true"></pop-up>
  </el-dialog>
  <el-dialog
      title="提示"
      :visible.sync="bindAuthVisible"
      :width="confirmWidth"
      center>
      <div class="mb10">添加巡检</div>
      <div>
        <template>
          <custom-form
            ref="customForm"
            :columns="device_list"
            :dialog="false"
            :hide-button="true"
            :visible.sync="bindAuthVisible"
            v-model="confirmFormData"
            :detail="confirmdetail"
            @submit="onSubmit"
          ></custom-form>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="bindAuthVisible = false">取消</el-button>
        <el-button type="primary" @click="onConfirmSuccess">确认</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import tableMixin from '@/utils/mixin/custom-table'
import PopUp from '@/views/popup/index'
import { showLoading, hideLoading } from '@/utils'
import curd from '@/api/curd'
import customForm from '@/views/custom/customForm'
// import mock from '@/utils/mixin/mock'

// var Mock = require('mockjs')
// import { randomNum } from '@/utils'

export default {
  data() {
    return {
      columns: [
        { name: '巡检名称', field: 'device_name' },
        // { name: '房号', field: 'number', width: 150, type: 'tag' },
        { name: '类型', field: 'type_name' },
        { name: '巡检员', field: 'repair_user.nickname', type: 'tag' },
        { name: '巡检图片', field: 'img_list', type: 'preview', show_overflow_tooltip: false, width: 100, opts: { key: 'link', type: 'img', one: true } },
        { name: '备注', field: 'mark', opts: {} },
        { name: '状态', field: 'state', type: 'tag', opts: {}, label: true },
        { name: '添加时间', field: 'create_time' }
      ],
      Visible: false,
      bindAuthVisible: false,
      tableData: [],
      confirmFormData: {}, // 绑定数据列表
      confirmdetail: {}, // 绑定功能的详情
      device_lists: [],
      device_id: '',
      user_id: '',
      headBtn: [
        {
          name: '添加',
          // 类型
          type: 'primary',
          // 图标
          icon: 'el-icon-plus',
          // 权限
          key: 'bindAuth',
          // confirm: '是否要绑定设备'
          input: []
        }
      ]
    }
  },
  components: {
    PopUp, customForm
  },
  mixins: [
    tableMixin
    // mock
  ],
  computed: {
    // 确认框的宽度
    confirmWidth() {
      return this.isMobile ? '95%' : '35%'
    },
    rowBtn() {
      return [
        {
          name: '详情',
          key: 'detail'
          // confirm: '确认进行发送催收通知吗？'
          // show(row) {
          //   return row.status === '待缴费'
          // }
        }
      ]
    },
    device_list() {
      var arr = [{
        name: '巡检设备',
        field: 'device_id',
        opts: { required: true, control: 'inspection_device', name: 'name', pk: 'id', reload: true },
        type: 'select_table',
        value: this.device_id
      },
      {
        name: '巡检员',
        field: 'user_id',
        opts: { required: true, control: 'repair_user', name: 'nickname', pk: 'id', reload: true },
        type: 'select_table',
        value: this.user_id
      }, {
        name: '巡检图片',
        field: 'img',
        opts: { required: false, multiple: true, tip: '请上传巡检图片' },
        type: 'upload_image'
      },
      { name: '备注', field: 'mark', width: 150, required: false }]
      var res = arr.concat(this.device_lists)
      return res
    }
  },
  watch: {
    'confirmFormData.device_id'(value, oldValue) {
      console.log('我进来了', value)
      if (value && value != oldValue) {
        console.log('我是非空值', this.confirmdetail)
        this.getDetail()
        // var arr = []
        // this.device_lists = arr
        // this.device_list = arr
        this.device_id = value
      }
    },
    'confirmFormData.user_id'(value, oldValue) {
      if (value && value != oldValue) {
        this.user_id = value
      }
    }
  },
  props: {},
  filters: {},
  created() {
  },
  methods: {
    // 打开添加记录弹窗
    onTapHeadBtnBindAuth(...data) {
      // console.log('获取设备成功', this.confirmFormData)
      // console.log('获取设备成功input', this.headBtn[0].input)
      this.bindAuthVisible = true
    },
    // 确认添加
    onConfirmSuccess() {
      // console.log('获取设备成功', this.confirmFormData)
      // console.log('获取设备成功input', this.headBtn[0].input)
      // this.$set(this.confirmFormData, 'device_id', 1)
      // this.confirmFormData['device_id'] = 1
      this.$refs.customForm.onClickSubmit()
    },
    // 提交
    onSubmit(formData) {
      var that = this
      console.log('我被提交了嘿嘿', formData)
      // formData.forEach((element, index) => {
      //   console.log(element, index)
      // })
      var data = {
        user_id: formData.user_id,
        device_name: that.confirmdetail.inspection_device ? that.confirmdetail.inspection_device.name : '',
        type_id: that.confirmdetail.inspection_device.pollingType ? that.confirmdetail.inspection_device.pollingType.id : 0,
        type_name: that.confirmdetail.inspection_device.pollingType ? that.confirmdetail.inspection_device.pollingType.name : '',
        img: formData.img,
        device_id: formData.device_id,
        normal_id: '',
        no_normal_id: '',
        state: 1,
        mark: formData.mark
      }
      delete formData.user_id
      delete formData.img
      delete formData.device_id
      var normal_id = ''
      var no_normal_id = ''
      for (let key in formData) {
        // for循环let key是对象里面的键，再通过,[]的形式this.objNum[item]去获取对象的value值
        // console.log('key', key.replace(/[^\d]/g, ''))
        if (formData[key]) {
          if (!no_normal_id) {
            no_normal_id = (key.replace(/[^\d]/g, ''))
          } else {
            no_normal_id = no_normal_id + ',' + (key.replace(/[^\d]/g, ''))
          }
        } else {
          if (!normal_id) {
            normal_id = (key.replace(/[^\d]/g, ''))
          } else {
            normal_id = normal_id + ',' + (key.replace(/[^\d]/g, ''))
          }
        }
        // console.log('value', formData[key])
      }
      data['normal_id'] = normal_id
      data['no_normal_id'] = no_normal_id
      console.log('提交的数据', data)
      // var key = this.confirmdetail.project?.type_key || 'all'
      // var control = `${key}_device`
      showLoading('添加中...')
      this.curd.save(data).then(res => {
        // console.log('绑定成功', res)
        this.bindAuthVisible = false
        that.device_lists = []
        that.device_id = ''
        that.user_id = ''
        that.confirmdetail = {}
        this.onTapHeadBtnFlush({})
        hideLoading()
      }, hideLoading)
    },
    onTapRowBtnDetail(data) {
      var that = this
      console.log(data)
      // that.Visible = true
      // showLoading('刷新权限中...')
      // setTimeout(function() {
      //   console.log('我被点击了')
      //   that.repairUserVisible = true
      //   hideLoading()
      // }, 1500)

      that.tableHead = [
        { name: '巡检内容', field: 'content' },
        { name: '状态', field: 'status', type: 'tag' }
      ]
      // that.title = '房间详情'
      showLoading('获取详情中...')
      that.curd.post('getRecordDetail', data).then(res => {
        hideLoading()
        console.log('全部租户', res)
        var arr = ({ list: res.data })
        that.tableData = arr
        this.Visible = true
        // this.onTapHeadBtnFlush({})
      }, hideLoading)
    },
    // 获取设备详情
    getDetail() {
      var that = this
      var type_id = that.confirmdetail.inspection_device.pollingType ? that.confirmdetail.inspection_device.pollingType.id : 0
      var data = {
        id: type_id
      }
      showLoading('获取内容中...')
      curd('pollingType').get('getDetail', data).then(res => {
        hideLoading()
        // console.log('获取成功', res)
        var data = res.data
        var arr = []
        data.forEach((element, index) => {
          if (element.label != '检查类型名称') {
            arr.push({ name: element.name + '是否异常', field: 'type_id' + element.id, opts: { required: true }, list: ['否', '是'], value: 0, type: 'radio' })
          }
          // console.log(element, index)
        })
        that.device_lists = arr
        // this.device_list = arr
        console.log('输出成功', that.device_lists)
        // console.log(arr)
        // that.form.data = res.data
        // that.add_or_save = true
        // this.dialogFormVisible = true
        // this.onTapHeadBtnFlush({})
      }, hideLoading)
    }
    /*
    onLoad() {
      Mock.Random.extend({
        roomType(date) {
          return this.pick(['单间', '一房一厅', '两房一厅', '三房一厅', '豪华套房'])
        },
        area() {
          return randomNum(50, 200)
        },
        amount() {
          return randomNum(500, 2000)
        },
        buildingName(data) {
          // return this.pick(['A栋', 'B栋', 'C栋', 'D栋']) + randomNum(1, 999).toString().padStart(3, '0')
          return randomNum(1, 10) + '栋1楼消防栓'
        },
        status() {
          return this.pick(['未巡检', '已巡检'])
        },
        roomNo() {
          return '琼花湖' + randomNum(1, 10) + '栋' + randomNum(1, 999).toString().padStart(3, '0')
        }
      })
      var data = Mock.mock({
        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
        'list|20': [{
          // 属性 id 是一个自增数，起始值为 1，每次增 1
          'id|+1': 1,
          'number': '@roomno',
          'nickname': '@cname',
          'create_time': '@now',
          'status': '@status',
          'name': '@buildingname',
          'inspection_device': '消防栓'
        }]
      })

      console.log('mock', data)

      this.setMockData(data)
    }
    */
  }
}
</script>

<style lang="scss">

</style>
